<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./static/css/common.css" />
    <!-- 引入element样式文件 -->
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <!-- <script src="https://unpkg.com/vue@3"></script> -->
    <script src="./static/js/vue.global.js"></script>
    <!-- 引入element脚本文件 -->
    <script src="./static/element-plus/index.full.js"></script>
  </head>

  <body>
    <div id="app">
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="4">
              <img src="./static/images/logo.png" />
              <h1>{{title}}</h1>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-menu
                class="el-menu-d---emo"
                mode="horizontal"
                :default-active="activeIndex"
              >
                <el-menu-item index="0">首页</el-menu-item>
                <el-menu-item index="1">文章</el-menu-item>
                <el-menu-item index="2">课程</el-menu-item>
                <el-menu-item index="3">商场</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-input v-model="keywords" placeholder="请输入搜索关键词" />
            </el-col>
            <el-col :span="4" v-if="user==null">
              <el-link type="primary" underline="never" href="login.html"
                >登录</el-link
              >
              <el-link type="primary" underline="never" href="register.html"
                >注册</el-link
              >
            </el-col>
            <el-col :span="4" v-else>
              <el-link type="primary" underline="never">
                <el-avatar src="./static/images/avatar.png" />
                <p style="padding: 0 20px">{{user.username}}</p>
              </el-link>
            </el-col>
          </el-row>
        </el-header>
        <el-main class="main">
          <el-carousel height="420px">
            <el-carousel-item>
              <img src="./static/images/carousel1.png" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="./static/images/carousel2.png" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="./static/images/carousel3.png" />
            </el-carousel-item>
          </el-carousel>
          <el-row>
            <el-col :span="8">
              <div>
                <el-text size="large" type="primary">热门文章</el-text>
                <el-button size="small">查看更多</el-button>
              </div>
              <ul>
                <li v-for="(item,i) in articleList" :key="i">
                  <p>{{item.title}}</p>
                  <el-text size="small" type="success">{{item.date}}</el-text>
                </li>
              </ul>
            </el-col>
            <el-col :span="8">
              <div>
                <el-text size="large" type="primary">热门课程</el-text>
                <el-button size="small" style="float: right; margin-right: 20px"
                  >查看更多</el-button
                >
              </div>
              <ul>
                <li v-for="(item,i) in courseList" :key="i">
                  <p>{{item.title}}</p>
                  <el-text size="small" type="danger">{{item.price}}</el-text>
                </li>
              </ul>
            </el-col>
            <el-col :span="8">
              <div>
                <el-text size="large" type="primary">热门商品</el-text>
                <el-button size="small" style="float: right; margin-right: 20px"
                  >查看更多</el-button
                >
              </div>
              <el-carousel height="240px">
                <el-carousel-item v-for="(item,i) in productList" :key="i">
                  <img :src="item.img" />
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>
        </el-main>
        <el-footer>
          <el-row>
            <el-col :span="8">
              <div><img src="./static/images/logo.png" /></div>
              <div>
                <h1>技术社区</h1>
                <p>致力于构建一个专业的IT技术交流社区</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-button type="text">首页</el-button>
                <el-button type="text">文章</el-button>
                <el-button type="text">课程</el-button>
                <el-button type="text">商场</el-button>
              </div>
              <div>
                <el-button type="text">关于我们</el-button>
                <el-button type="text">使用手册</el-button>
                <el-button type="text">隐私条款</el-button>
                <el-button type="text">建议反馈</el-button>
              </div>
            </el-col>
            <el-col :span="8">
              <h2>联系我们</h2>
              <p>电话：123456789</p>
              <p>邮箱：xxx@xxx.com</p>
            </el-col>
          </el-row>
          <el-row>
            <p style="margin: 20px 0">软件开发工作室版权所有</p>
          </el-row>
        </el-footer>
      </el-container>
    </div>

    <script>
      const App = {
        data() {
          return {
            title: "技术社区",
            activeIndex: 0,
            keywords: "",
            user: null,
            // user: {
            //   username: "张三",
            // },
            // 文章列表
            articleList: [
              { title: "Vue3.0新特性使用攻略", date: "2025-10-21" },
              { title: "Vue3.0新特性使用攻略", date: "2025-10-21" },
              { title: "Vue3.0新特性使用攻略", date: "2025-10-21" },
              { title: "Vue3.0新特性使用攻略", date: "2025-10-21" },
            ],
            // 课程列表
            courseList: [
              { title: "零基础学习Vue3.0", price: "2025-10-21" },
              { title: "零基础学习Vue3.0", price: "2025-10-21" },
              { title: "零基础学习Vue3.0", price: "2025-10-21" },
              { title: "零基础学习Vue3.0", price: "2025-10-21" },
            ],
            // 商品列表
            productList: [
              {
                type: "徽章",
                name: "IT社区文创 ：「代码新秀闪耀」 荣誉徽章",
                price: 10,
                stock: 200,
                img: "./static/images/product01.png",
              },
              {
                type: "帆布包",
                name: "【it社区文创】「极简主义」帆布包",
                price: 50,
                stock: 100,
                img: "./static/images/product02.png",
              },
              {
                type: "T恤",
                name: "蓝字魔法，解锁IT新风尚——百搭T恤衫",
                price: 60,
                stock: 100,
                img: "./static/images/product03.png",
              },
              {
                type: "笔记本",
                name: "高端皮质IT笔记本，简约设计尽显专业气质",
                price: 30,
                stock: 50,
                img: "./static/images/product04.png",
              },
              {
                type: "鼠标垫",
                name: "文创字母鼠标垫「IT技术社区专属」",
                price: 15,
                stock: 50,
                img: "./static/images/product05.png",
              },
              {
                type: "马克杯",
                name: "白色陶瓷杯，简约IT标志，时尚办公新选择",
                price: 20,
                stock: 50,
                img: "./static/images/product06.png",
              },
            ],
          };
        },
      };
      Vue.createApp(App).use(ElementPlus).mount("#app");
    </script>
  </body>
</html>